<template>
  <div class="label case">
    <div class="head">
      <Header />
    </div>
    <div class="block_1 block">
      <div class="block_content">
        <div class="bc_text bc_1">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_1_text">
              <template>
                <h2 :key="item">标签管理系统</h2>
                <h1 key="2" class="mv24">
                  全面、便捷的标签系统及<br />应用解决方案
                </h1>
                <h4 key="3" class="mb40">
                  标签智能生成、内容合规性检测、全面的应用方案
                </h4>
                <el-button key="4" type="primary" @click="toDetails(1)" class="big_btn">联系我们</el-button>
              </template>
            </template>
          </transition-group>
        </div>
        <div class="bc_img">
          <el-image :src="require('@/assets/page_1/page_1_1.png')"></el-image>
          <template v-for="item in imgs_1">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_1_text">
              </el-image>
            </transition>
          </template>
        </div>
      </div>
    </div>
    <div class="block_2 block">
      <div class="block_content">
        <div class="bc_img bc_1">
          <el-image :src="require('@/assets/page_1/page_1_5.png')"></el-image>
          <template v-for="item in imgs_2">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_2_text">
              </el-image>
            </transition>
          </template>
        </div>
        <div class="bc_text">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_2_text">
              <template>
                <h3 :key="item">建立商品3D模型</h3>
                <h4 key="2" class="mv24">
                  实现智能标签设计<br />虚拟打样，展示交互
                </h4>
                <li key="3">在模型上智能设计标签</li>
                <li key="4">实时显示贴标效果</li>
                <li key="5">为直喷标签提供数据参数</li>
              </template>
            </template>
          </transition-group>
          <p key="6" class="a_label" @click="toDetails('onePage')">
            查看更多<i class="iconfont lRightIcon"></i>
          </p>
        </div>
      </div>
    </div>
    <div class="block_3 block">
      <div class="block_content">
        <div class="bc_text bc_1">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_3_text">
              <template>
                <h3 :key="item">智能标签设计器</h3>
                <h4 key="2" class="mv24">
                  标签一键生成<br />内容合规检验，虚拟展示
                </h4>
                <p key="3" class="mb10 f14">设计可处理但不限于</p>
                <li key="4">内容、板式、尺寸</li>
                <li key="5">颜色、材质、工艺</li>
                <li key="6">功能应用方案</li>
              </template>
            </template>
          </transition-group>
          <p key="6" class="a_label" @click="toDetails('twoPage')">
            查看更多<i class="iconfont lRightIcon"></i>
          </p>
        </div>
        <div class="bc_img">
          <el-image :src="require('@/assets/page_1/page_1_1.png')"></el-image>
          <el-image :src="require('@/assets/page_1/page_1_mouse.png')" class="page_mouse page_1"></el-image>
          <template v-for="item in imgs_1">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_3_text">
              </el-image>
            </transition>
          </template>
        </div>
      </div>
    </div>
    <div class="block_4 block">
      <div class="block_content">
        <div class="bc_img bc_1">
          <el-image :src="require('@/assets/page_1/page_1_9.png')"></el-image>
          <template v-for="item in imgs_3">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_4_text">
              </el-image>
            </transition>
          </template>
        </div>
        <div class="bc_text">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_4_text">
              <template>
                <h3 :key="item">多场景标签功能应用方案</h3>
                <h4 key="2" class="mv24">
                  提供系统平台、协助客户部署功能标签系统<br />让“小”标签“大”功效
                </h4>
                <li key="3">追溯</li>
                <li key="4">防伪</li>
                <li key="5">防开</li>
                <li key="6">营销复购</li>
              </template>
            </template>
          </transition-group>
          <p class="a_label" @click="toDetails('threePage')">
            查看更多<i class="iconfont lRightIcon"></i>
          </p>
        </div>
      </div>
    </div>
    <div class="block_5 block">
      <div class="block_content">
        <div class="bc_text bc_1">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_5_text">
              <template>
                <h3 :key="item">标签生产制作及检验</h3>
                <h4 key="2" class="mv24">
                  先进的直印方案<br />价优高品的传统标签印刷方案
                </h4>
                <li key="4">标签印刷</li>
                <li key="5">标签直喷</li>
                <li key="6">标签检验</li>
              </template>
            </template>
          </transition-group>
          <p key="6" class="a_label" @click="toDetails('fourPage')">
            查看更多<i class="iconfont lRightIcon"></i>
          </p>
        </div>
        <div class="bc_img">
          <el-image :src="require('@/assets/page_1/page_1_12.png')"></el-image>
          <template v-for="item in imgs_4">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_5_text">
              </el-image>
            </transition>
          </template>
        </div>
      </div>
    </div>
    <div class="block_6 flexLcc">
      <div>
        <h1>寻找标签解决方案？</h1>
        <el-button type="primary" class="big_btn" @click="toDetails(1)">立即试用</el-button>
      </div>
    </div>
    <div class="foot">
      <Footer />
    </div>
  </div>
</template>
<script>
  import Header from "@/components/header";
  import Footer from "@/components/footer";
  import $ from "jquery";
  import router from "@/router";
  export default {
    name: "web_content",
    components: {
      Header,
      Footer,
    },
    data() {
      return {
        scrollNum: null,
        block_1_text: false,
        block_1_img: false,
        block_2_text: false,
        block_3_text: false,
        block_4_text: false,
        block_5_text: false,
        imgs_1: [{
            img: require("@/assets/page_1/page_1_2.png"),
            class: "page_1_2",
            name: "left",
            show: false,
          },
          {
            img: require("@/assets/page_1/page_1_3.png"),
            class: "page_1_3",
            name: "bottom",
            show: false,
          },
          {
            img: require("@/assets/page_1/page_1_4.png"),
            class: "page_1_4",
            name: "right",
            show: false,
          },
        ],
        imgs_2: [{
            img: require("@/assets/page_1/page_1_6.png"),
            class: "page_1_6",
            name: "left",
          },
          {
            img: require("@/assets/page_1/page_1_7.png"),
            class: "page_1_7",
            name: "bottom",
          },
          {
            img: require("@/assets/page_1/page_1_8.png"),
            class: "page_1_8",
            name: "right",
          },
        ],
        imgs_3: [{
            img: require("@/assets/page_1/page_1_10.png"),
            class: "page_1_10",
            name: "right",
          },
          {
            img: require("@/assets/page_1/page_1_11.png"),
            class: "page_1_11",
            name: "bottom",
          },
        ],
        imgs_4: [{
          img: require("@/assets/page_1/page_1_13.png"),
          class: "page_1_13",
          name: "right",
        }, ],
      };
    },
    props: {},
    mounted() {
      // 进入文字淡入
      this.block_1_text = true;
      //开启监听
      this.monitorShortcut();
    },
    destroyed() {
      this.monitorShortcut(1)
    },
    methods: {
      toDetails(type) {
        if (type == 1) {
          router.push({
            path: '/about'
          })
        } else {
          router.push({
            path: '/label/' + type
          })
        }
      },
      // 监听鼠标滚轮
      monitorShortcut(type) {
        if (type) {
          $(".label").scroll(function () {});
          return
        }
        let that = this;
        $(".label").scroll(function () {
          let p = $(".label").scrollTop();
          if (p > 0) {
            //第二页显示
            that.block_2_text = true;
            let c = $(window).height();
            let blocks = $('.block');
            for (var index = 2; index < 5; index++) {
              let height = blocks[index].offsetTop;
              if (p + c > height + 500) {
                that['block_' + (index + 1) + '_text'] = true;
              }
            }

          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "./css/css.scss";
  @import "./css/animation.css";
</style>